<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>template-grammer</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
    <div id="app">

    </div>
    <script type="importmap">
        {
          "imports": {
            // "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            "vue": "./unpkg.com_vue@3.3.7_dist_vue.esm-browser.js"
          }
        }
      </script>
    <script type="module">
        import { createApp } from 'vue';

        // 1 属性绑定多个值
        // 2 v-bind属性使用动态参数
        const templateCmp = {
            data() {
                return {
                    attrs: {
                        id: 'abc',
                        title: 'abc'
                    },
                    attributeName: 'href',
                    attributeValue: 'https://cn.vuejs.org/guide/essentials/template-syntax.html'
                }
            },
            template: `<div v-bind="attrs">templateCmp</div>
                <a v-bind:[attributeName]="attributeValue">https://cn.vuejs.org/guide/essentials/template-syntax.html</a>
            `
        }
        createApp(templateCmp).mount('#app')
    </script>

</body>

</html>